<template>
  <div class="menu-tree">
    <el-row :gutter="10">
      <el-col :span="7">
        <el-card>
          <template #header>
            <div class="card-header">菜单管理</div>
          </template>
          <el-tree
              class="tree-panel"
              :data="menuList"
              node-key="menuId"
              :props="treeProps"
              default-expand-all
              :expand-on-click-node="false"
              highlight-current
              @node-click="nodeClick"
              ref="treeRef"
          >
            <template #default="{ node, data }">
              <span class="custom-node-style" >
                  <span>{{ data.menuName }}</span>
                    <el-dropdown>
                  <span  v-has="proxy.PermissionCode.menu.edit">
                    操作
                  </span>
                  <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="showEditDialog('add',data)">添加子菜单</el-dropdown-item>
                    <el-dropdown-item v-if="data.pId!==-1" @click="showEditDialog('edit',data)">修改</el-dropdown-item>
                    <el-dropdown-item v-if="data.pId!==-1" @click="delMenu(data)">删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </span>
            </template>
          </el-tree>
        </el-card>
      </el-col>
      <el-col :span="17">
        <el-card>
          <template #header>
            <div class="card-header">菜单管理</div>
          </template>
          <el-form label-position="right" label-width="100px">
            <el-form-item label="菜单Id: ">
              {{ detailData.menuId }}
            </el-form-item>
            <el-form-item label="菜单名称: ">
              {{ detailData.menuName }}
            </el-form-item>
            <el-form-item label="菜单层级: ">
              <el-breadcrumb separator="/">
                <el-breadcrumb-item v-for="name in detailData.menuNames">{{ name }}</el-breadcrumb-item>

              </el-breadcrumb>
            </el-form-item>
            <el-form-item label="菜单类型: ">
              {{ detailData.menuType === 0 ? "菜单" : "按钮" }}
            </el-form-item>
            <el-form-item label="请求路径: ">
              {{ detailData.menuUrl ? detailData.menuUrl : "-" }}
            </el-form-item>
            <el-form-item label="权限编码: ">
              {{ detailData.permissionCode }}
            </el-form-item>
            <!--            <el-form-item label="菜单图标: ">-->
            <!--              {{ detailData.menuType === 0 ? "菜单" : "按钮" }}-->
            <!--            </el-form-item>-->
            <el-form-item label="排序号: ">
              {{ detailData.sort }}
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>


<script setup>
import {onMounted, ref, getCurrentInstance, nextTick} from "vue";

const {proxy} = getCurrentInstance();

const api = {
  getMenuList: "/settings/menuList",
  SaveMenu: "/settings/saveMenu",
  delMenu: "/settings/delMenu",
}

const treeRef = ref();
const treeProps = {
  class: "cust-tree-item",
  children: "children",
  label: "menuName",
  value: "menuId"
}

// 当前
const menuList = ref();
const loadMenuList = async () => {
  let result = await proxy.Request({
    url: api.getMenuList,
  })
  if (!result) {
    return;
  }
  let data = result.data;
  menuList.value = data;

  // 初始化时选择第一个
  nextTick(() => {
    let firstNodeData = data[0].children ? data[0].children[0] : data[0];
    let curKey = firstNodeData.menuId;
    treeRef.value.setCurrentKey(curKey);
    const curNode = treeRef.value.getNode(curKey);
    nodeClick(curNode.data, curNode)
  })
}

// 菜单详情
const detailData = ref({});

// 点击节点
const nodeClick = (data, node) => {
  let menuNames = [];
  getMenuNames(node, menuNames);
  data.menuNames = menuNames;
  detailData.value = data;
}
// 获取菜单层级
const getMenuNames = (node, menuNames) => {
  if (node.data.menuName) {
    menuNames.unshift(node.data.menuName);
  }
  // 有父级
  if (node.parent) {
    getMenuNames(node.parent, menuNames);
  }
}


// 操作节点
const showEditDialog = (type, data) => {
}

const delMenu = (data) => {
  proxy.Confirm("确定要删除菜单吗？", async () => {
    // let result = await proxy.Request({
    //   url:api.delMenu,
    //   params:{
    //     menuId:data.menuId
    //   },
    // })
    // if (!result) {
    //   return;
    // }
    proxy.Message.success("删除成功");
    loadMenuList();
  })
}

onMounted(() => {
  loadMenuList();
})
</script>


<style scoped lang="scss">
.menu-tree {
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .iconfont {
      color: #409eff;
      font-size: 20px;
      cursor: pointer;
    }
  }

  .tree-panel {
    overflow: auto;
    height: calc(100vh - 250px);
  }

  :deep .el-tree-node__content {
    height: 40px;
  }

  .custom-node-style {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    margin-right: 10px;
  }
}
</style>
